<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07事件监听</title>
</head>
<body>
<button onclick="alert('警告框')">弹出警告框</button>
<button onclick="confirm('您确认要删除吗?')">弹出确认框</button>
<button onclick="prompt('请输入会员卡号:')">弹出提示输入框</button>

<hr>
<h4>震惊！奥运开幕式竟然发生了...</h4>
<button>按钮</button>

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ipsum perspiciatis repellat sit soluta? Cupiditate
    dolore obcaecati repellendus sed vel. Error exercitationem expedita impedit natus obcaecati optio quia veritatis
    vitae.
</div>
<div>A adipisci beatae consequatur corporis eligendi error fugiat ipsa, iste itaque iure libero magnam neque,
    nesciunt nihil nisi numquam placeat possimus quae quia quidem recusandae repellendus sed tenetur ullam ut.
</div>
<div>A ad alias aliquam aspernatur beatae enim et excepturi id ipsam iste laudantium maiores modi mollitia nihil
    nobis numquam placeat saepe, similique sint totam ut vitae voluptatibus? Aliquam dolore, sapiente.
</div>
<div>Ab aperiam architecto, asperiores assumenda consequuntur distinctio dolores eius ex facere nulla possimus
    quibusdam sint tempora totam voluptates! At cupiditate debitis dolorum earum explicabo fugiat impedit,
    recusandae sapiente suscipit ut.
</div>
<div>Aliquid cupiditate ex fuga non temporibus. Animi culpa quod sapiente veniam. Aut autem debitis dignissimos
    dolor ducimus eveniet expedita fuga ipsam necessitatibus nesciunt numquam perspiciatis praesentium quis, sit
    voluptatibus! Perferendis.
</div>
<div>Ab assumenda at atque consequuntur deserunt eum iusto laboriosam mollitia nemo, praesentium reiciendis rem sint
    ullam unde voluptas voluptates voluptatum? Blanditiis corporis eligendi illo inventore maiores, quae quod
    voluptates voluptatum!
</div>
<div>Architecto at blanditiis dolor doloremque esse id neque nobis quae quidem quis repellendus tenetur velit vitae,
    voluptas, voluptatum! Accusantium aliquam amet dicta distinctio id illo nisi nobis reprehenderit saepe sapiente?
</div>
<div>Accusamus asperiores at beatae consectetur distinctio dolores eius et facere iste magnam mollitia nisi omnis
    perferendis, perspiciatis praesentium quae quia quo repellat repellendus sint! Atque facere quam voluptas
    voluptate voluptates?
</div>
<div>Aspernatur consectetur cum dignissimos, distinctio ea eaque error excepturi facere iusto maxime necessitatibus
    odit officiis placeat quis ratione sed suscipit tenetur vero voluptate voluptates! Aspernatur eos neque
    provident! Iste, minima!
</div>
<div>At distinctio eaque et excepturi, explicabo itaque laudantium molestiae, molestias natus nostrum odit,
    reiciendis vel voluptas. Ad alias error explicabo fuga necessitatibus quae quaerat quidem quo totam. Alias, eius
    odio?
</div>
<div>Accusamus, atque consectetur culpa cum dolore ea esse est, eum fugiat id laborum quas quia ratione rerum
    temporibus velit veniam voluptate! Blanditiis distinctio dolor laudantium numquam, quam rerum velit veritatis.
</div>
<div>Culpa earum enim fuga nam totam. Accusantium, eius enim facere laboriosam natus officia ratione voluptatum. A
    alias amet aspernatur corporis culpa earum excepturi nesciunt odit quas repellat rerum, sapiente similique.
</div>
<div>Ab esse facilis fugiat in inventore ipsam ipsum labore molestiae nam nemo omnis provident qui sed sunt,
    tenetur. Accusantium alias dolores ea ex fuga incidunt odio quis reprehenderit veniam voluptatibus?
</div>
<div>Assumenda atque commodi consequuntur culpa dolores eius eligendi eum exercitationem facere harum ipsam iure
    minima non nulla odit pariatur perspiciatis porro reiciendis similique sit soluta tempora temporibus ut
    veritatis, voluptates!
</div>
<div>Adipisci distinctio dolorum eius error explicabo laudantium voluptas. Accusantium ad consequatur debitis dicta
    dolor ducimus, ipsa libero minima nisi officia pariatur perferendis porro possimus quaerat quasi suscipit
    tempore unde vitae!
</div>
<div>Accusamus adipisci asperiores assumenda consectetur corporis distinctio, ea est et eveniet excepturi explicabo
    id iusto libero magni maxime nostrum perspiciatis provident quaerat quo repellendus rerum, sapiente, sed tempora
    voluptas voluptatum!
</div>
<div>Assumenda odit quas repellendus reprehenderit rerum sapiente. Magnam, rem, velit? Adipisci assumenda aut cumque
    deleniti ea est iure molestias nam nostrum numquam quam qui quibusdam, quidem sit soluta suscipit, tempore?
</div>
<div>Beatae fugit harum ipsum, nam neque quisquam ratione vitae! Aperiam architecto cumque esse et fuga in, iure
    omnis quos repellendus reprehenderit repudiandae soluta veritatis? Dolor ea illo libero maxime quisquam.
</div>
<div>Accusamus, aspernatur consequatur corporis dolore dolorem dolores doloribus ea harum hic impedit iste iure
    laboriosam maiores mollitia, nam nesciunt nisi perferendis possimus reiciendis soluta suscipit vel vitae
    voluptatum. Assumenda, repudiandae.
</div>
<div>Accusamus ad aspernatur consectetur consequuntur cum dolorem doloribus, ea fugiat, laborum maxime molestias
    nesciunt nulla suscipit ut voluptatem? Adipisci debitis ducimus et explicabo in inventore nesciunt, quod totam
    unde vel.
</div>


<script>
    /*点击事件*/
    let buttonE = document.querySelector('button');
    buttonE.addEventListener('click', function () {
        alert('按钮被点击了！');
    })
    /*鼠标移入事件*/
    let h4E = document.querySelector('h4');
    h4E.addEventListener('mouseover', function () {
        console.log('标题被(悬停)了！');
    })

    /* window是DOM自带的对象,它是一个全局对象，代表了当前浏览器视口 */
    window.addEventListener('resize', function () {
        // alert('窗口大小被改变了！');
    })
    window.addEventListener('scroll', function () {
        alert('窗口滚动了！');
    })
</script>
</body>
</html>